<template>
  <el-tooltip v-if="!isDiy" :open-delay="300" placement="top">
    <div slot="content" :style="{ maxWidth }">
      <span v-if="useHtml" class="tooltip-scroll" v-html="content"/>
      <span v-else>{{ content }}</span>
    </div>
    <el-image :src="imgSrc" :style="{width: imgWidth + 'px',height: imgHeight + 'px'}" class="img" @mouseenter="changeImg(true)" @mouseleave="changeImg()"/>
  </el-tooltip>
  <el-image v-else :src="imgSrc" :style="{width: imgWidth + 'px',height: imgHeight + 'px'}" class="img" @mouseenter="changeImg(true)" @mouseleave="changeImg()"/>
</template>
<script>
import tip from '@/assets/tishi.png';
import tipHover from '@/assets/tishi_hover.png';
import btnTip from '@/assets/btn_tip.png';
import btnTipActive from '@/assets/btn_tip_active.png';

export default {
  props: {
    imgWidth: {
      type: Number | String,
      default: 14
    },
    imgHeight: {
      type: Number | String,
      default: 14
    },
    maxWidth: {
      type: String,
      default: '300px'
    },
    content: {
      type: String,
      default: ''
    },
    isDiy: {// 开启自定义提示则仅作为图标
      type: Boolean,
      default: false
    },
    useHtml: {
      type: Boolean,
      default: false
    },
    isBtnTip: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      btnTip,
      btnTipActive,
      tip,
      tipHover,
      inHover: false
    };
  },
  computed: {
    imgSrc() {
      const icon = this.isBtnTip ? btnTip : tip;
      const activeIcon = this.isBtnTip ? btnTipActive : tipHover;
      return this.inHover ? activeIcon : icon;
    }
  },
  methods: {
    changeImg(inHover = false) {
      this.inHover = inHover;
    }
  }
};
</script>
<style lang="scss" scoped>
  .img {
    display: inline-block;
    flex-shrink: 0;
  }
</style>
